<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			div {
				width: 272px;
				height: 117px;
				/*background-color: red;*/
				background-image: url("img/che.png");
				position: absolute;
				animation: run 2s linear 0s infinite;
			}

			img {
				position: absolute;
				animation: roll .1s linear 0s infinite;
			}
			
			.one {
				left: 20px;
				top: 64px;
			}

			.two {
				top: 64px;
				left: 190px;
			}
			
			/* 旋转 */
			@keyframes roll {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			@keyframes run {
				from {
					top: 0;
					left: 0;
					transform: skewX(45deg);
				}

				25% {
					top: 300px;
				}

				50% {
					top: 0px;
				}

				75% {
					top: 300px;
				}

				to {
					left: 100%;
					top: 0;
					transform: skewX(-45deg);
				}
			}

		</style>
	</head>
	<body>

		<div class="car">
			<img src="img/lun.png" alt="" class="one">
			<img src="img/lun.png" alt="" class="two">
		</div>
		
	</body>
</html>